<template>
    <div class="payment">
        <div class="time_down payment_group">
            请在
            <span class="red">半小时内</span>
            完成付款，否则系统自动取消订单
        </div>

        <van-cell-group class="payment_group">
            <van-cell title="订单编号" :value="order.orderInfo.orderSn"/>
            <van-cell title="实付金额">
                <span class="red">{{order.orderInfo.payPrice *100 | yuan}}</span>
            </van-cell>
        </van-cell-group>

        <div class="pay_way_group">
            <div class="pay_way_title">选择支付方式</div>
            <van-radio-group v-model="payWay">
                <van-cell-group>
                    <van-cell>
                        <template slot="title">
                            <img src="../../../assets/images/wx_pay.png" alt="微信支付" width="113" height="23">
                        </template>
                        <van-radio name="wx"/>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
        </div>

        <van-button class="pay_submit" @click="pay" type="primary" bottomAction>去支付</van-button>
    </div>
</template>

<script>
    import {Radio, RadioGroup, Dialog} from 'vant';
    import {orderDetail, orderPrepay, payAgain,wxConfig} from '@/api/api';
    import wx from 'weixin-js-sdk'
    import _ from 'lodash';
    import {getLocalStorage, setLocalStorage} from '@/utils/local-storage';
    export default {
        name: 'payment',
        data() {
            return {
                payWay: 'wx',
                order: {
                    orderInfo: {},
                    orderGoods: []
                },
                orderId: 0
            };
        },
        mounted() {
            var currentUrl = escape(window.location.href);
            wxConfig({url: currentUrl}).then(res => {
                var config = res.data.result;
                wx.config({
                    beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
                    appId: config.appId, // 必填，企业微信的corpID
                    timestamp: config.timestamp, // 必填，生成签名的时间戳
                    nonceStr: config.nonceStr, // 必填，生成签名的随机串 必填，生成签名的随机串
                    signature: config.signature, // 必填，签名
                    jsApiList: ['chooseWXPay']
                });
            });

        },
        created() {
            if (_.has(this.$route.params, 'orderId')) {
                this.orderId = this.$route.params.orderId;
                this.getOrder(this.orderId);
            }
        },
        methods: {
            getOrder(orderId) {
                orderDetail({id: orderId}).then(res => {
                    console.log(res.data, "orderDetail");
                    this.order.orderInfo = res.data.result;
                });
            },
            pay() {
                var This=this;
                payAgain({
                    id: This.orderId
                }).then(res => {
                    // 下单成功，重置下单参数。
                    var datas=res.data.result;
                    wx.invoke('getBrandWCPayRequest',{
                        // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。
                        // 但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        timeStamp: datas.timeStamp,
                        // 支付签名随机串，不长于 32 位
                        nonceStr: datas.nonceStr,
                        package: datas.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                        signType: datas.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        paySign: datas.paySign, // 支付签名
                        success: function(res) {
                            // 支付成功后的回调函数
                            this.$toast("支付成功");
                            this.$router.push({ path: '/order/payment/2' });
                        },
                        fail: function(res) {
                            this.$toast("支付失败");
                            this.$router.push({ path: '/order/payment/1' });
                        },
                        complete: function(res) {
                            this.$toast("complete");
                            this.$router.push({ path: '/order/payment/2' });
                        }
                    })
                }).catch(error => {
                    this.$router.push({ path: '/order/payment/1' });
                    this.$toast(error);
                })
            }
        },

        components: {
            [Radio.name]: Radio,
            [RadioGroup.name]: RadioGroup,
            [Dialog.name]: Dialog
        }
    };
</script>

<style lang="scss" scoped>
    .payment_group {
        margin-bottom: 10px;
    }

    .time_down {
        background-color: #fffeec;
        padding: 10px 15px;
    }

    .pay_submit {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .pay_way_group img {
        vertical-align: middle;
    }

    .pay_way_title {
        padding: 15px;
        background-color: #fff;
    }
</style>
